const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // eslint 是否在保存的时候检查
  lintOnSave: true,
  /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
  productionSourceMap: false,
  // 配置 webpack-dev-server 行为。
  devServer: {
    port: 50000,
    open: true,
  },
  // px转rem的配置（postcss-plugin-px2rem插件）
  lintOnSave: true,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 37.5, // 换算基数，1rem相当于10px，值为37.5时，1rem为20px，淘宝的flex默认为1rem为10px
            // unitPrecision: 5, // 允许REM单位增长到的十进制数字。
            //propWhiteList: [],  // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], // 黑名单
            exclude: /(node_modules)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_modules)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], // 要忽略并保留为px的选择器
            // ignoreIdentifier: false,  // （boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
            // minPixelValue: 0, // 设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ],
      },
    },
  },
  // less设置，less-loader版本，避免与UI库的版本冲突
  // npm install style-resources-loader vue-cli-plugin-style-resources-loader less-loader less
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [resolve("src/assets/styles/variable.less")],
    },
  },
  chainWebpack: (config) => {
    /* 查看打包文件体积大小 */
    // config
    //   .plugin('webpack-bundle-analyzer')
    //   .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);

    config.plugin("html").tap((args) => {
      args[0].title = "vue2.0 H5 + Vant"; // 修改浏览图页签的标题
      return args;
    });
  },
};
